<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git仓库详解 - 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .icon-box {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }
        .quote:before {
            content: """;
            font-size: 4rem;
            line-height: 1;
            color: rgba(0,0,0,0.1);
            position: absolute;
            left: -1rem;
            top: -1rem;
        }
        .first-letter:first-letter {
            font-size: 3.5em;
            float: left;
            line-height: 0.8;
            margin-right: 0.5rem;
            color: #6e48aa;
            font-weight: bold;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <header class="hero-gradient text-white py-24 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Git仓库详解</h1>
                    <p class="text-xl opacity-90 mb-8">版本控制系统的核心：从基础到高级应用</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#intro" class="bg-white text-purple-700 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all">开始阅读</a>
                        <a href="#visualization" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition-all">可视化图表</a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white bg-opacity-20 p-8 rounded-2xl backdrop-blur-sm">
                        <div class="mermaid">
                            gitGraph
                                commit
                                branch develop
                                checkout develop
                                commit
                                commit
                                checkout main
                                merge develop
                                commit
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 py-16">
        <!-- Introduction Section -->
        <section id="intro" class="mb-20">
            <div class="flex items-center mb-12">
                <div class="h-1 bg-purple-600 w-16 rounded-full"></div>
                <h2 class="text-3xl font-bold ml-4">Git仓库概述</h2>
            </div>
            
            <div class="bg-white rounded-2xl shadow-lg p-8 mb-12 card-hover">
                <p class="text-lg first-letter">Git仓库（Git Repository）是Git版本控制系统中存储项目文件和版本历史的核心数据结构。它包含了项目的所有版本信息、历史记录、分支、标签等数据。Git仓库的设计允许开发者在本地和远程环境中高效地管理和跟踪文件的更改。</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8 mt-12">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <div class="icon-box bg-purple-100 text-purple-600">
                        <i class="fas fa-folder-open text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">工作目录</h3>
                    <p class="text-gray-600">开发者本地计算机上的目录，包含当前项目的实际文件和目录，用于日常的代码编辑和修改。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <div class="icon-box bg-blue-100 text-blue-600">
                        <i class="fas fa-layer-group text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">暂存区</h3>
                    <p class="text-gray-600">中间层，用于暂时存储即将提交的更改。通过git add命令将修改添加到暂存区。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <div class="icon-box bg-green-100 text-green-600">
                        <i class="fas fa-database text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">本地仓库</h3>
                    <p class="text-gray-600">存储项目的所有提交记录，每个提交代表项目的一个历史快照，包括文件内容和提交信息。</p>
                </div>
            </div>
        </section>

        <!-- Structure Section -->
        <section class="mb-20">
            <div class="flex items-center mb-12">
                <div class="h-1 bg-blue-600 w-16 rounded-full"></div>
                <h2 class="text-3xl font-bold ml-4">Git仓库的结构</h2>
            </div>
            
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 p-8">
                        <div class="mb-6">
                            <h3 class="text-xl font-bold mb-2 text-blue-700">1. 工作目录（Working Directory）</h3>
                            <p class="text-gray-700">这是开发者本地计算机上的目录，其中包含了当前项目的实际文件和目录。开发者在这里进行日常的代码编辑和修改。</p>
                        </div>
                        <div class="mb-6">
                            <h3 class="text-xl font-bold mb-2 text-blue-700">2. 暂存区（Staging Area）</h3>
                            <p class="text-gray-700">又称为索引（Index），它是一个中间层，用于暂时存储即将提交的更改。通过`git add`命令，开发者将工作目录中的修改添加到暂存区，准备提交到本地仓库。</p>
                        </div>
                        <div class="mb-6">
                            <h3 class="text-xl font-bold mb-2 text-blue-700">3. 本地仓库（Local Repository）</h3>
                            <p class="text-gray-700">本地仓库存储项目的所有提交（commit）记录。每个提交代表了项目的一个历史快照，包括所有文件的完整内容以及提交信息。Git使用提交对象、树对象和文件对象来组织和管理这些历史快照。</p>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2 text-blue-700">4. 远程仓库（Remote Repository）</h3>
                            <p class="text-gray-700">远程仓库是存储在网络服务器上的Git仓库，通常用于团队协作和共享代码。开发者可以将本地仓库的更改推送到远程仓库，也可以从远程仓库拉取更新。远程仓库常见的托管服务有GitHub、GitLab、Bitbucket等。</p>
                        </div>
                    </div>
                    <div class="md:w-1/2 bg-gray-50 p-8 flex items-center justify-center">
                        <div class="mermaid">
                            flowchart TD
                                A[工作目录\nWorking Directory] -->|git add| B[暂存区\nStaging Area]
                                B -->|git commit| C[本地仓库\nLocal Repository]
                                C -->|git push| D[远程仓库\nRemote Repository]
                                D -->|git pull/fetch| C
                                D -->|git clone| A
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Function Section -->
        <section class="mb-20">
            <div class="flex items-center mb-12">
                <div class="h-1 bg-green-600 w-16 rounded-full"></div>
                <h2 class="text-3xl font-bold ml-4">Git仓库的作用</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-bold mb-3 text-green-700"><i class="fas fa-history mr-2"></i> 版本控制</h3>
                    <p class="text-gray-700">Git仓库记录了项目文件的所有历史版本，允许开发者查看、回退或恢复到以前的版本。这使得开发者可以追踪项目的演变过程，并在需要时恢复到稳定版本。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-bold mb-3 text-green-700"><i class="fas fa-code-branch mr-2"></i> 分支管理</h3>
                    <p class="text-gray-700">Git仓库支持高效的分支管理，使得开发者可以创建、切换和合并分支。分支使得开发者能够在独立的开发环境中工作，进行实验、开发新功能或修复bug。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-bold mb-3 text-green-700"><i class="fas fa-users mr-2"></i> 团队协作</h3>
                    <p class="text-gray-700">远程仓库使得分布在不同地点的开发者能够协作开发。开发者可以通过将本地更改推送到远程仓库，以及从远程仓库拉取其他团队成员的更改来进行协作。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-bold mb-3 text-green-700"><i class="fas fa-shield-alt mr-2"></i> 数据完整性</h3>
                    <p class="text-gray-700">Git通过使用SHA-1哈希算法对所有对象进行标识，确保数据的完整性和安全性。每个提交、每个文件和每个对象都有唯一的哈希值，任何数据的篡改都会导致哈希值的变化。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-bold mb-3 text-green-700"><i class="fas fa-random mr-2"></i> 高效的差异和合并</h3>
                    <p class="text-gray-700">Git仓库内的提交记录和分支管理使得差异和合并操作高效且可靠。Git能够高效地计算文件之间的差异，并能够智能地合并不同分支的更改，处理代码冲突。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-bold mb-3 text-green-700"><i class="fas fa-cloud-upload-alt mr-2"></i> 持久化和备份</h3>
                    <p class="text-gray-700">每个Git仓库包含了所有项目的历史记录，即使远程服务器发生故障，开发者仍然可以依赖本地仓库进行恢复。分布式架构使得Git能够在多个地点保存代码的副本。</p>
                </div>
            </div>
        </section>

        <!-- Workflow Section -->
        <section id="visualization" class="mb-20">
            <div class="flex items-center mb-12">
                <div class="h-1 bg-orange-600 w-16 rounded-full"></div>
                <h2 class="text-3xl font-bold ml-4">Git仓库的工作流程</h2>
            </div>
            
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 p-8">
                        <div class="flex items-start mb-6">
                            <div class="bg-orange-100 text-orange-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
                                <span class="font-bold">1</span>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2 text-orange-700">初始化仓库</h3>
                                <p class="text-gray-700">通过`git init`命令初始化一个新的Git仓库，创建`.git`目录，该目录包含了所有的版本控制信息。</p>
                            </div>
                        </div>
                        <div class="flex items-start mb-6">
                            <div class="bg-orange-100 text-orange-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
                                <span class="font-bold">2</span>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2 text-orange-700">添加文件</h3>
                                <p class="text-gray-700">将文件添加到暂存区，使用`git add`命令选择要提交的文件。</p>
                            </div>
                        </div>
                        <div class="flex items-start mb-6">
                            <div class="bg-orange-100 text-orange-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
                                <span class="font-bold">3</span>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2 text-orange-700">提交更改</h3>
                                <p class="text-gray-700">通过`git commit`命令将暂存区的内容提交到本地仓库，记录一个新的版本快照。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-orange-100 text-orange-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
                                <span class="font-bold">4</span>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2 text-orange-700">推送和拉取</h3>
                                <p class="text-gray-700">使用`git push`将本地更改推送到远程仓库，使用`git pull`从远程仓库拉取最新的更改，保持本地和远程仓库的一致性。</p>
                            </div>
                        </div>
                    </div>
                    <div class="md:w-1/2 bg-gray-50 p-8 flex items-center justify-center">
                        <div class="mermaid">
                            sequenceDiagram
                                participant WD as 工作目录
                                participant SA as 暂存区
                                participant LR as 本地仓库
                                participant RR as 远程仓库
                                WD->>SA: git add
                                SA->>LR: git commit
                                LR->>RR: git push
                                RR->>LR: git pull
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Quote Section -->
        <section class="mb-20">
            <div class="bg-purple-100 rounded-2xl p-8 md:p-12 relative quote">
                <div class="flex items-start">
                    <div class="text-purple-600 text-4xl mr-4">"</div>
                    <div>
                        <p class="text-xl md:text-2xl font-medium text-gray-800 mb-4">Git仓库是现代软件开发的基础设施，不仅提供了强大的版本控制能力，还通过其分布式特性彻底改变了团队协作的方式。</p>
                        <p class="text-gray-600">— Git 设计哲学</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-xl font-bold">技术小馆</h3>
                    <p class="text-gray-400 mt-2">探索技术的无限可能</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition-colors flex items-center">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        <span>访问技术小馆语雀</span>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                &copy; 2023 技术小馆. 版权所有.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            },
            gitGraph: {
                mainBranchName: 'main',
                showCommitLabel: false
            }
        });
    </script>
</body>
</html>